<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="theme-color" content="#222"><meta name="generator" content="Hexo 6.2.0">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">
  <meta name="google-site-verification" content="kYQuniuaRZuL9fq0DATfL7extAwcqWG6Ki286ZMcpak">
  <meta name="baidu-site-verification" content="code-MRqS7DOO9x">

<link rel="stylesheet" href="/css/main.css">



<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha256-DfWjNxDkM94fVBWx1H5BMMp0Zq7luBlV8QRcSES7s+0=" crossorigin="anonymous">

<script class="next-config" data-name="main" type="application/json">{"hostname":"blogwxb.cn","root":"/","images":"/images","scheme":"Gemini","darkmode":false,"version":"8.11.1","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12},"copycode":{"enable":true,"style":null},"bookmark":{"enable":false,"color":"#222","save":"auto"},"mediumzoom":true,"lazyload":true,"pangu":false,"comments":{"style":"tabs","active":"gitalk","storage":true,"lazyload":false,"nav":null,"activeClass":"gitalk"},"stickytabs":false,"motion":{"enable":false,"async":false,"transition":{"post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"prism":false,"i18n":{"placeholder":"搜索...","empty":"没有找到任何搜索结果：${query}","hits_time":"找到 ${hits} 个搜索结果（用时 ${time} 毫秒）","hits":"找到 ${hits} 个搜索结果"},"path":"/search.xml","localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false}}</script><script src="/js/config.js"></script>

    <meta name="description" content="主要是分享自己在Web前端的一些入的坑，脱的坑的经历，也会是分享一些Node后端的知识。">
<meta property="og:type" content="website">
<meta property="og:title" content="会飞的猪9527">
<meta property="og:url" content="https://blogwxb.cn/page/6/index.html">
<meta property="og:site_name" content="会飞的猪9527">
<meta property="og:description" content="主要是分享自己在Web前端的一些入的坑，脱的坑的经历，也会是分享一些Node后端的知识。">
<meta property="og:locale" content="zh_CN">
<meta property="article:author" content="wxb">
<meta property="article:tag" content="web前端，前端博客，vue，js，html，css，html5，css3，node，express，git，react">
<meta name="twitter:card" content="summary">


<link rel="canonical" href="https://blogwxb.cn/page/6/">



<script class="next-config" data-name="page" type="application/json">{"sidebar":"","isHome":true,"isPost":false,"lang":"zh-CN","comments":"","permalink":"","path":"page/6/index.html","title":""}</script>

<script class="next-config" data-name="calendar" type="application/json">""</script>
<title>会飞的猪9527</title>
  





  <noscript>
    <link rel="stylesheet" href="/css/noscript.css">
  </noscript>
  <!-- Google Analytics -->
  <script>
  window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
  ga('create', 'UA-XXXXX-Y', 'auto');
  ga('send', 'pageview');
  </script>
  <script async src='https://www.google-analytics.com/analytics.js'></script>
  <!-- End Google Analytics -->

  <!-- Baidu Analytics -->
  <script async src = 'https://zz.bdstatic.com/linksubmit/push.js'></script>
  <!-- End Baidu Analytics -->

<link rel="alternate" href="/atom.xml" title="会飞的猪9527" type="application/atom+xml">
</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="headband"></div>

  <main class="main">
    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏" role="button">
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <i class="logo-line"></i>
      <h1 class="site-title">会飞的猪9527</h1>
      <i class="logo-line"></i>
    </a>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>



<nav class="site-nav">
  <ul class="main-menu menu"><li class="menu-item menu-item-home"><a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a></li><li class="menu-item menu-item-tags"><a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签<span class="badge">32</span></a></li><li class="menu-item menu-item-categories"><a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类<span class="badge">5</span></a></li><li class="menu-item menu-item-archives"><a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档<span class="badge">91</span></a></li><li class="menu-item menu-item-commonweal"><a href="/404" rel="section"><i class="fa fa-heartbeat fa-fw"></i>公益 404</a></li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup"><div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocapitalize="off" maxlength="80"
           placeholder="搜索..." spellcheck="false"
           type="search" class="search-input">
  </div>
  <span class="popup-btn-close" role="button">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div class="search-result-container no-result">
  <div class="search-result-icon">
    <i class="fa fa-spinner fa-pulse fa-5x"></i>
  </div>
</div>

    </div>
  </div>

</div>
        
  
  <div class="toggle sidebar-toggle" role="button">
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
  </div>

  <aside class="sidebar">

    <div class="sidebar-inner sidebar-overview-active">
      <ul class="sidebar-nav">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <div class="sidebar-panel-container">
        <!--noindex-->
        <div class="post-toc-wrap sidebar-panel">
        </div>
        <!--/noindex-->

        <div class="site-overview-wrap sidebar-panel">
          <div class="site-author site-overview-item animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="wxb"
      src="/images/avatar.jpg">
  <p class="site-author-name" itemprop="name">wxb</p>
  <div class="site-description" itemprop="description">主要是分享自己在Web前端的一些入的坑，脱的坑的经历，也会是分享一些Node后端的知识。</div>
</div>
<div class="site-state-wrap site-overview-item animated">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
        <a href="/archives/">
          <span class="site-state-item-count">91</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
          <a href="/categories/">
        <span class="site-state-item-count">5</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
          <a href="/tags/">
        <span class="site-state-item-count">32</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>
  <div class="links-of-author site-overview-item animated">
      <span class="links-of-author-item">
        <a href="https://github.com/dearDreamWeb" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;dearDreamWeb" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
      </span>
  </div>


  <div class="links-of-blogroll site-overview-item animated">
    <div class="links-of-blogroll-title"><i class="fa fa-globe fa-fw"></i>
      推荐
    </div>
    <ul class="links-of-blogroll-list">
        <li class="links-of-blogroll-item">
          <a href="https://www.ruanyifeng.com/blog/" title="https:&#x2F;&#x2F;www.ruanyifeng.com&#x2F;blog&#x2F;" rel="noopener" target="_blank">阮一峰的网络日志</a>
        </li>
        <li class="links-of-blogroll-item">
          <a href="https://nav.blogwxb.cn/" title="https:&#x2F;&#x2F;nav.blogwxb.cn&#x2F;" rel="noopener" target="_blank">轩辕导航</a>
        </li>
    </ul>
  </div>

        </div>
      </div>
    </div>
  </aside>
  <div class="sidebar-dimmer"></div>


    </header>

    
  <div class="back-to-top" role="button" aria-label="返回顶部">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>
  <div class="reading-progress-bar"></div>

  <a href="https://github.com/dearDreamWeb" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>

<noscript>
  <div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>


    <div class="main-inner index posts-expand">

    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="https://blogwxb.cn/fs-writeFile%E5%86%99%E5%85%A5object%E5%AF%B9%E8%B1%A1%E6%95%B0%E6%8D%AE%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.jpg">
      <meta itemprop="name" content="wxb">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="会飞的猪9527">
      <meta itemprop="description" content="主要是分享自己在Web前端的一些入的坑，脱的坑的经历，也会是分享一些Node后端的知识。">
    </span>

    <span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
      <meta itemprop="name" content="undefined | 会飞的猪9527">
      <meta itemprop="description" content="">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/fs-writeFile%E5%86%99%E5%85%A5object%E5%AF%B9%E8%B1%A1%E6%95%B0%E6%8D%AE%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/" class="post-title-link" itemprop="url">fs.writeFile写入object对象数据解决方案</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2020-09-30 17:46:56" itemprop="dateCreated datePublished" datetime="2020-09-30T17:46:56+08:00">2020-09-30</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar-check"></i>
      </span>
      <span class="post-meta-item-text">更新于</span>
      <time title="修改时间：2022-10-07 23:14:02" itemprop="dateModified" datetime="2022-10-07T23:14:02+08:00">2022-10-07</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/%E5%89%8D%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">前端</span></a>
        </span>
    </span>

  
</div>


        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h1 id="问题描述"><a href="#问题描述" class="headerlink" title="问题描述"></a>问题描述</h1><p>如果是要写入<code>object</code>数据的话，会出现<code>[object,object]</code>的情况<br>例如:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">fs.<span class="title function_">writeFile</span>(<span class="string">&quot;./data.json&quot;</span>, &#123;<span class="attr">a</span>:<span class="number">1</span>,<span class="attr">b</span>:<span class="number">2</span>&#125;, </span><br><span class="line"> <span class="function"><span class="params">err</span> =&gt;</span> <span class="variable language_">console</span>.<span class="title function_">log</span>(err))</span><br></pre></td></tr></table></figure>
<p>运行之后的<code>data.json</code>文件的内容为 <code>[object,object]</code></p>
          <!--noindex-->
            <div class="post-button">
              <a class="btn" href="/fs-writeFile%E5%86%99%E5%85%A5object%E5%AF%B9%E8%B1%A1%E6%95%B0%E6%8D%AE%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/#more" rel="contents">
                阅读全文 &raquo;
              </a>
            </div>
          <!--/noindex-->
        
      
    </div>

    
    
    
      


    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="https://blogwxb.cn/node%E6%A1%86%E6%9E%B6express%E4%B8%AD%E7%94%9F%E6%88%90%E9%AA%8C%E8%AF%81%E7%A0%81svg-captcha/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.jpg">
      <meta itemprop="name" content="wxb">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="会飞的猪9527">
      <meta itemprop="description" content="主要是分享自己在Web前端的一些入的坑，脱的坑的经历，也会是分享一些Node后端的知识。">
    </span>

    <span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
      <meta itemprop="name" content="undefined | 会飞的猪9527">
      <meta itemprop="description" content="">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/node%E6%A1%86%E6%9E%B6express%E4%B8%AD%E7%94%9F%E6%88%90%E9%AA%8C%E8%AF%81%E7%A0%81svg-captcha/" class="post-title-link" itemprop="url">node框架express中生成验证码svg-captcha</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2020-09-23 09:20:38" itemprop="dateCreated datePublished" datetime="2020-09-23T09:20:38+08:00">2020-09-23</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar-check"></i>
      </span>
      <span class="post-meta-item-text">更新于</span>
      <time title="修改时间：2022-10-07 23:14:02" itemprop="dateModified" datetime="2022-10-07T23:14:02+08:00">2022-10-07</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/%E5%90%8E%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">后端</span></a>
        </span>
    </span>

  
</div>


        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h1 id="前提说明"><a href="#前提说明" class="headerlink" title="前提说明"></a>前提说明</h1><p>本文章采用了svg-captcha方法去实现验证码功能，后端是express，前端是vue。<br>实现方式：</p>
<ol>
<li>通过后端生成验证码，把验证码的值存到<code>session</code>中;</li>
<li>再把验证码发到前端，前端去接收并把验证码在界面中显示出来;</li>
<li>前端输入验证码后提交到后端，和后端session中保存的验证码做对比，看是否一致。</li>
</ol>
<h1 id="svg-captcha使用步骤"><a href="#svg-captcha使用步骤" class="headerlink" title="svg-captcha使用步骤"></a>svg-captcha使用步骤</h1><ol>
<li>安装svg-captcha</li></ol>
          <!--noindex-->
            <div class="post-button">
              <a class="btn" href="/node%E6%A1%86%E6%9E%B6express%E4%B8%AD%E7%94%9F%E6%88%90%E9%AA%8C%E8%AF%81%E7%A0%81svg-captcha/#more" rel="contents">
                阅读全文 &raquo;
              </a>
            </div>
          <!--/noindex-->
        
      
    </div>

    
    
    
      


    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="https://blogwxb.cn/%E8%87%AA%E5%88%B6%E7%AE%80%E6%98%93%E7%9A%84localStorage%E5%92%8CsessionStorage%E7%9A%84%E5%B0%81%E8%A3%85%E5%BA%93/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.jpg">
      <meta itemprop="name" content="wxb">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="会飞的猪9527">
      <meta itemprop="description" content="主要是分享自己在Web前端的一些入的坑，脱的坑的经历，也会是分享一些Node后端的知识。">
    </span>

    <span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
      <meta itemprop="name" content="undefined | 会飞的猪9527">
      <meta itemprop="description" content="">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/%E8%87%AA%E5%88%B6%E7%AE%80%E6%98%93%E7%9A%84localStorage%E5%92%8CsessionStorage%E7%9A%84%E5%B0%81%E8%A3%85%E5%BA%93/" class="post-title-link" itemprop="url">自制简易的localStorage和sessionStorage的封装库</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2020-09-18 20:30:15" itemprop="dateCreated datePublished" datetime="2020-09-18T20:30:15+08:00">2020-09-18</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar-check"></i>
      </span>
      <span class="post-meta-item-text">更新于</span>
      <time title="修改时间：2022-10-07 23:14:03" itemprop="dateModified" datetime="2022-10-07T23:14:03+08:00">2022-10-07</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/%E5%89%8D%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">前端</span></a>
        </span>
    </span>

  
</div>


        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h1 id="说明"><a href="#说明" class="headerlink" title="说明"></a>说明</h1><p>该封装库只是对localStorage和sessionStorage进行的简易封装。<br>优点：</p>
<ul>
<li>对localStorage和sessionStorage的操作更能加便捷。</li>
</ul>
<p>缺点：</p>
<ul>
<li>因为使用的JSON.parse和JSON.stringify，所以存取数据如果为对象并且对象中的值为undefined、function等会照成数据丢失。</li>
</ul>
<h1 id="封装的代码"><a href="#封装的代码" class="headerlink" title="封装的代码"></a>封装的代码</h1>
          <!--noindex-->
            <div class="post-button">
              <a class="btn" href="/%E8%87%AA%E5%88%B6%E7%AE%80%E6%98%93%E7%9A%84localStorage%E5%92%8CsessionStorage%E7%9A%84%E5%B0%81%E8%A3%85%E5%BA%93/#more" rel="contents">
                阅读全文 &raquo;
              </a>
            </div>
          <!--/noindex-->
        
      
    </div>

    
    
    
      


    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="https://blogwxb.cn/TypeScript%E4%B8%AD%E7%9A%84%E6%8E%A5%E5%8F%A3interface/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.jpg">
      <meta itemprop="name" content="wxb">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="会飞的猪9527">
      <meta itemprop="description" content="主要是分享自己在Web前端的一些入的坑，脱的坑的经历，也会是分享一些Node后端的知识。">
    </span>

    <span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
      <meta itemprop="name" content="undefined | 会飞的猪9527">
      <meta itemprop="description" content="">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/TypeScript%E4%B8%AD%E7%9A%84%E6%8E%A5%E5%8F%A3interface/" class="post-title-link" itemprop="url">TypeScript中的接口interface</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2020-09-12 10:44:52" itemprop="dateCreated datePublished" datetime="2020-09-12T10:44:52+08:00">2020-09-12</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar-check"></i>
      </span>
      <span class="post-meta-item-text">更新于</span>
      <time title="修改时间：2022-10-07 23:14:03" itemprop="dateModified" datetime="2022-10-07T23:14:03+08:00">2022-10-07</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/%E5%89%8D%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">前端</span></a>
        </span>
    </span>

  
</div>


        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h1 id="接口"><a href="#接口" class="headerlink" title="接口"></a>接口</h1><p>接口是由<code>interface</code>去定义的，知识点分为</p>
<ul>
<li>属性接口</li>
<li>函数类型接口</li>
<li>可索引接口</li>
<li>类类型接口</li>
<li>接口扩展</li>
</ul>
<h1 id="属性接口"><a href="#属性接口" class="headerlink" title="属性接口"></a>属性接口</h1><p>每个属性用分号结尾，而不是逗号</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">interface <span class="title class_">UserInfo</span> &#123;</span><br><span class="line">  <span class="attr">name</span>: string;</span><br><span class="line">  <span class="attr">age</span>: number;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">person</span>(<span class="params">obj: UserInfo</span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(obj.<span class="property">name</span>, obj.<span class="property">age</span>);  <span class="comment">// www 18</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">person</span>(&#123; <span class="attr">name</span>: <span class="string">&quot;www&quot;</span>, <span class="attr">age</span>: <span class="number">18</span> &#125;);</span><br></pre></td></tr></table></figure>
          <!--noindex-->
            <div class="post-button">
              <a class="btn" href="/TypeScript%E4%B8%AD%E7%9A%84%E6%8E%A5%E5%8F%A3interface/#more" rel="contents">
                阅读全文 &raquo;
              </a>
            </div>
          <!--/noindex-->
        
      
    </div>

    
    
    
      


    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="https://blogwxb.cn/js%E4%B8%AD%E7%9A%84get%E5%92%8Cset%E6%96%B9%E6%B3%95/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.jpg">
      <meta itemprop="name" content="wxb">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="会飞的猪9527">
      <meta itemprop="description" content="主要是分享自己在Web前端的一些入的坑，脱的坑的经历，也会是分享一些Node后端的知识。">
    </span>

    <span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
      <meta itemprop="name" content="undefined | 会飞的猪9527">
      <meta itemprop="description" content="">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/js%E4%B8%AD%E7%9A%84get%E5%92%8Cset%E6%96%B9%E6%B3%95/" class="post-title-link" itemprop="url">js中的get和set方法</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2020-09-09 19:16:55" itemprop="dateCreated datePublished" datetime="2020-09-09T19:16:55+08:00">2020-09-09</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar-check"></i>
      </span>
      <span class="post-meta-item-text">更新于</span>
      <time title="修改时间：2022-10-07 23:14:03" itemprop="dateModified" datetime="2022-10-07T23:14:03+08:00">2022-10-07</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/%E5%89%8D%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">前端</span></a>
        </span>
    </span>

  
</div>


        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h1 id="get和set的介绍"><a href="#get和set的介绍" class="headerlink" title="get和set的介绍"></a>get和set的介绍</h1><p>get 和 set方法可以使用在<code>对象</code>或者<code>构造函数</code>中，但不能出现在普通的function里。<br>vue中的计算属性<code>computed</code>默认使用的就是vue已经<code>封装好的get方法</code>。  </p>
<h1 id="get和set的使用方法"><a href="#get和set的使用方法" class="headerlink" title="get和set的使用方法"></a>get和set的使用方法</h1><ol>
<li><p>get和set是方法，因为是方法，所以可以进行判断  </p>
</li>
<li><p>get一般是要<code>返回</code>的；而set是<code>设置</code>，不用返回</p>
</li>
<li><p>get 和 set的方法名可以重名</p>
</li>
<li><p>set方法必须要有<code>形参</code>，<code>否则报错</code></p>
</li>
<li><p>如果调用对象内部的属性约定的命名方式是变量名前加_</p>
</li>
</ol>
<p>对象的例子</p>
          <!--noindex-->
            <div class="post-button">
              <a class="btn" href="/js%E4%B8%AD%E7%9A%84get%E5%92%8Cset%E6%96%B9%E6%B3%95/#more" rel="contents">
                阅读全文 &raquo;
              </a>
            </div>
          <!--/noindex-->
        
      
    </div>

    
    
    
      


    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="https://blogwxb.cn/React%E7%BB%84%E4%BB%B6%E4%BC%A0%E5%8F%82%E7%88%B6%E5%AD%90%EF%BC%8C%E7%88%B7%E5%AD%99%EF%BC%8C%E5%85%84%E5%BC%9F/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.jpg">
      <meta itemprop="name" content="wxb">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="会飞的猪9527">
      <meta itemprop="description" content="主要是分享自己在Web前端的一些入的坑，脱的坑的经历，也会是分享一些Node后端的知识。">
    </span>

    <span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
      <meta itemprop="name" content="undefined | 会飞的猪9527">
      <meta itemprop="description" content="">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/React%E7%BB%84%E4%BB%B6%E4%BC%A0%E5%8F%82%E7%88%B6%E5%AD%90%EF%BC%8C%E7%88%B7%E5%AD%99%EF%BC%8C%E5%85%84%E5%BC%9F/" class="post-title-link" itemprop="url">React组件传参父子，爷孙，兄弟</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2020-09-07 17:48:32" itemprop="dateCreated datePublished" datetime="2020-09-07T17:48:32+08:00">2020-09-07</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar-check"></i>
      </span>
      <span class="post-meta-item-text">更新于</span>
      <time title="修改时间：2022-10-07 23:14:03" itemprop="dateModified" datetime="2022-10-07T23:14:03+08:00">2022-10-07</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/%E5%89%8D%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">前端</span></a>
        </span>
    </span>

  
</div>


        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h1 id="父子组件传参"><a href="#父子组件传参" class="headerlink" title="父子组件传参"></a>父子组件传参</h1><p>父组件在子组件上写上类似html标签的属性和属性值，子组件用props接收</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 父组件</span></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">Parent</span> <span class="keyword">extends</span> <span class="title class_ inherited__">React.Component</span> &#123;</span><br><span class="line">  <span class="title function_">render</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> (<span class="language-xml"><span class="tag">&lt;<span class="name">Child</span> <span class="attr">text</span>=<span class="string">&quot;来自父组件的参数&quot;</span> /&gt;</span></span>)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 子组件</span></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">Child</span> <span class="keyword">extends</span> <span class="title class_ inherited__">React.Component</span> &#123;</span><br><span class="line">  <span class="title function_">render</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">props</span>.<span class="property">text</span>);  <span class="comment">// 来自父组件的参数</span></span><br><span class="line">    <span class="keyword">return</span> (<span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span>&#123;this.props.text&#125;<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span>)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>打印结果是:   </p>
          <!--noindex-->
            <div class="post-button">
              <a class="btn" href="/React%E7%BB%84%E4%BB%B6%E4%BC%A0%E5%8F%82%E7%88%B6%E5%AD%90%EF%BC%8C%E7%88%B7%E5%AD%99%EF%BC%8C%E5%85%84%E5%BC%9F/#more" rel="contents">
                阅读全文 &raquo;
              </a>
            </div>
          <!--/noindex-->
        
      
    </div>

    
    
    
      


    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="https://blogwxb.cn/vue%E5%BC%95%E5%85%A5echarts/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.jpg">
      <meta itemprop="name" content="wxb">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="会飞的猪9527">
      <meta itemprop="description" content="主要是分享自己在Web前端的一些入的坑，脱的坑的经历，也会是分享一些Node后端的知识。">
    </span>

    <span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
      <meta itemprop="name" content="undefined | 会飞的猪9527">
      <meta itemprop="description" content="">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/vue%E5%BC%95%E5%85%A5echarts/" class="post-title-link" itemprop="url">vue引入echarts</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2020-08-31 22:38:55" itemprop="dateCreated datePublished" datetime="2020-08-31T22:38:55+08:00">2020-08-31</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar-check"></i>
      </span>
      <span class="post-meta-item-text">更新于</span>
      <time title="修改时间：2022-10-07 23:14:03" itemprop="dateModified" datetime="2022-10-07T23:14:03+08:00">2022-10-07</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/%E5%89%8D%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">前端</span></a>
        </span>
    </span>

  
</div>


        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h1 id="下载echarts"><a href="#下载echarts" class="headerlink" title="下载echarts"></a>下载echarts</h1><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install echarts --save</span><br></pre></td></tr></table></figure>
<h1 id="全局引入Echarts"><a href="#全局引入Echarts" class="headerlink" title="全局引入Echarts"></a>全局引入Echarts</h1><p>在&#x2F;src&#x2F;main.js中加入：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> echarts <span class="keyword">from</span> <span class="string">&#x27;echarts&#x27;</span></span><br><span class="line"><span class="title class_">Vue</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">$echarts</span> = echarts</span><br></pre></td></tr></table></figure>
<h1 id="创建一个图表"><a href="#创建一个图表" class="headerlink" title="创建一个图表"></a>创建一个图表</h1>
          <!--noindex-->
            <div class="post-button">
              <a class="btn" href="/vue%E5%BC%95%E5%85%A5echarts/#more" rel="contents">
                阅读全文 &raquo;
              </a>
            </div>
          <!--/noindex-->
        
      
    </div>

    
    
    
      


    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="https://blogwxb.cn/path-resolve%E5%92%8Cpath-join/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.jpg">
      <meta itemprop="name" content="wxb">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="会飞的猪9527">
      <meta itemprop="description" content="主要是分享自己在Web前端的一些入的坑，脱的坑的经历，也会是分享一些Node后端的知识。">
    </span>

    <span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
      <meta itemprop="name" content="undefined | 会飞的猪9527">
      <meta itemprop="description" content="">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/path-resolve%E5%92%8Cpath-join/" class="post-title-link" itemprop="url">path.resolve和path.join</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2020-08-20 20:03:23" itemprop="dateCreated datePublished" datetime="2020-08-20T20:03:23+08:00">2020-08-20</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar-check"></i>
      </span>
      <span class="post-meta-item-text">更新于</span>
      <time title="修改时间：2022-10-07 23:14:03" itemprop="dateModified" datetime="2022-10-07T23:14:03+08:00">2022-10-07</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/%E5%90%8E%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">后端</span></a>
        </span>
    </span>

  
</div>


        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h1 id="一、path模块的引入"><a href="#一、path模块的引入" class="headerlink" title="一、path模块的引入"></a>一、path模块的引入</h1><p>需要引入path模块才能使用path.resolve()和path.join()</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">const path = require(&#x27;path&#x27;);</span><br></pre></td></tr></table></figure>
<h1 id="二、path-resolve-from…-to"><a href="#二、path-resolve-from…-to" class="headerlink" title="二、path.resolve([from…],to)"></a>二、path.resolve([from…],to)</h1><p>作用：把一个路径或路径片段的序列解析为一个绝对路径。相当于执行cd操作。<br><code>path.resolve 中 &#39;doc&#39; 和 &#39;./doc&#39; 等价，代表当前文件夹下。但是&#39;/doc&#39;代表的是根目录下的doc</code></p>
          <!--noindex-->
            <div class="post-button">
              <a class="btn" href="/path-resolve%E5%92%8Cpath-join/#more" rel="contents">
                阅读全文 &raquo;
              </a>
            </div>
          <!--/noindex-->
        
      
    </div>

    
    
    
      


    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="https://blogwxb.cn/Express%E5%AE%9E%E7%8E%B0%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0%E5%8E%9F%E7%90%86%20form%20enctype%E5%B1%9E%E6%80%A7%20%20path%E6%A8%A1%E5%9D%97%20%20multer%E6%A8%A1%E5%9D%97/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.jpg">
      <meta itemprop="name" content="wxb">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="会飞的猪9527">
      <meta itemprop="description" content="主要是分享自己在Web前端的一些入的坑，脱的坑的经历，也会是分享一些Node后端的知识。">
    </span>

    <span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
      <meta itemprop="name" content="undefined | 会飞的猪9527">
      <meta itemprop="description" content="">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/Express%E5%AE%9E%E7%8E%B0%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0%E5%8E%9F%E7%90%86%20form%20enctype%E5%B1%9E%E6%80%A7%20%20path%E6%A8%A1%E5%9D%97%20%20multer%E6%A8%A1%E5%9D%97/" class="post-title-link" itemprop="url">Express实现文件上传原理 form enctype属性  path模块  multer模块</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2020-08-17 08:37:43" itemprop="dateCreated datePublished" datetime="2020-08-17T08:37:43+08:00">2020-08-17</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar-check"></i>
      </span>
      <span class="post-meta-item-text">更新于</span>
      <time title="修改时间：2022-10-07 23:14:03" itemprop="dateModified" datetime="2022-10-07T23:14:03+08:00">2022-10-07</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/%E5%90%8E%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">后端</span></a>
        </span>
    </span>

  
</div>


        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h1 id="一、要实现文件上传原理要用到的知识点"><a href="#一、要实现文件上传原理要用到的知识点" class="headerlink" title="一、要实现文件上传原理要用到的知识点"></a>一、要实现文件上传原理要用到的知识点</h1><ul>
<li>form enctype属性</li>
<li>multer模块</li>
<li>path模块</li>
</ul>
<h1 id="二、form-enctype属性"><a href="#二、form-enctype属性" class="headerlink" title="二、form enctype属性"></a>二、form enctype属性</h1><h2 id="注意"><a href="#注意" class="headerlink" title="注意"></a>注意</h2><p><code>用form提交数据时，要提交的数据input标签都要有name属性，否则该值提交无效。</code></p>
<!--- more -->
<p>正常情况，form标签的enctype默认属性是   <code>application/x-www-form-urlencoded</code>   是以字符串形式传输的，这次实现文件上传要用到  <code>multipart/form-data</code></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">form</span> <span class="attr">action</span>=<span class="string">&quot;http://localhost:3000&quot;</span> <span class="attr">method</span>=<span class="string">&quot;post&quot;</span> <span class="attr">enctype</span>=<span class="string">&quot;multipart/form-data&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;file&quot;</span> <span class="attr">name</span>=<span class="string">&quot;file&quot;</span> <span class="attr">id</span>=<span class="string">&quot;file&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;submit&quot;</span> <span class="attr">value</span>=<span class="string">&quot;提交&quot;</span> <span class="attr">class</span>=<span class="string">&quot;btn btn-primary&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="语法"><a href="#语法" class="headerlink" title="语法"></a>语法</h2><p><code>&lt;form enctype=&quot;value&quot;&gt;</code></p>
<h2 id="属性值"><a href="#属性值" class="headerlink" title="属性值"></a>属性值</h2><table>
<thead>
<tr>
<th align="left">属性</th>
<th align="left">描述</th>
</tr>
</thead>
<tbody><tr>
<td align="left">application&#x2F;x-www-form-urlencoded</td>
<td align="left">在发送前编码所有<code>字符</code>（默认）</td>
</tr>
<tr>
<td align="left">multipart&#x2F;form-data</td>
<td align="left">不对字符编码。在使用包含<code>文件上传</code>控件的表单时，必须使用该值。</td>
</tr>
<tr>
<td align="left">text&#x2F;plain</td>
<td align="left">空格转换为 “+” 加号，但不对特殊字符编码。</td>
</tr>
</tbody></table>
<h1 id="三、multer模块"><a href="#三、multer模块" class="headerlink" title="三、multer模块"></a>三、multer模块</h1><p>先安装 <code>cnpm i multer --save</code><br>该模块是以中间件的形式存在的<br>用来接收form表单中的以文件形式上传的文件<br>例如：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> multer = <span class="built_in">require</span>(<span class="string">&#x27;multer&#x27;</span>);</span><br><span class="line">server.<span class="title function_">listen</span>(<span class="number">3000</span>);</span><br><span class="line">server.<span class="title function_">use</span>(<span class="title function_">multer</span>().<span class="title function_">any</span>());</span><br></pre></td></tr></table></figure>
<p><code>.any()</code>代表可以接受任何文件类型<br>可以用<code>req.files</code>来查看接收的文件<br>例如：(req.files接收到的数据)</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">[ &#123; <span class="attr">fieldname</span>: <span class="string">&#x27;file&#x27;</span>,  <span class="comment">// from表单中的name属性的属性值</span></span><br><span class="line">    <span class="attr">originalname</span>: <span class="string">&#x27;Adobe CC.ico&#x27;</span>,  <span class="comment">// 上传的文件名字</span></span><br><span class="line">    <span class="attr">encoding</span>: <span class="string">&#x27;7bit&#x27;</span>,      <span class="comment">//文件编码</span></span><br><span class="line">    <span class="attr">mimetype</span>: <span class="string">&#x27;image/x-icon&#x27;</span>,    <span class="comment">//文件的 MIME 类型</span></span><br><span class="line">    <span class="attr">destination</span>: <span class="string">&#x27;./save/&#x27;</span>,       <span class="comment">//保存路径</span></span><br><span class="line">    <span class="attr">filename</span>: <span class="string">&#x27;8b3222e43d3cbbe7ab159589256d1552&#x27;</span>,  <span class="comment">//保存在 destination 中的文件名</span></span><br><span class="line">    <span class="attr">path</span>: <span class="string">&#x27;save\\8b3222e43d3cbbe7ab159589256d1552&#x27;</span>,<span class="comment">//已上传文件的完整路径</span></span><br><span class="line">    <span class="attr">size</span>: <span class="number">36462</span>   <span class="comment">//文件大小（字节单位）   </span></span><br><span class="line">    &#125; ]</span><br></pre></td></tr></table></figure>
<p>接收的文件是以数组的形式发送到后端的，数组里面只有一项，是对象  </p>
<table>
<thead>
<tr>
<th align="left">属性</th>
<th align="left">描述</th>
</tr>
</thead>
<tbody><tr>
<td align="left">fieldname</td>
<td align="left">Field name 由表单指定</td>
</tr>
<tr>
<td align="left">originalname</td>
<td align="left">用户计算机上的文件的名称</td>
</tr>
<tr>
<td align="left">encoding</td>
<td align="left">文件编码</td>
</tr>
<tr>
<td align="left">mimetype</td>
<td align="left">文件的 MIME 类型</td>
</tr>
<tr>
<td align="left">size</td>
<td align="left">文件大小（字节单位）</td>
</tr>
<tr>
<td align="left">destination</td>
<td align="left">保存路径</td>
</tr>
<tr>
<td align="left">filename</td>
<td align="left">保存在 destination 中的文件名</td>
</tr>
<tr>
<td align="left">path</td>
<td align="left">已上传文件的完整路径</td>
</tr>
<tr>
<td align="left">buffer</td>
<td align="left">一个存放了整个文件的 Buffer</td>
</tr>
</tbody></table>
<p><code>multer(&#123;dest:&#39;地址&#39;&#125;)</code>  自动帮你储存 - <code>名字自动改成hash值</code> 防止重名<br>缺点：没有后缀<br>例子：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> mysql = <span class="built_in">require</span>(<span class="string">&#x27;mysql&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> express = <span class="built_in">require</span>(<span class="string">&#x27;express&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> multer = <span class="built_in">require</span>(<span class="string">&#x27;multer&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> app = <span class="title function_">express</span>();</span><br><span class="line">app.<span class="title function_">listen</span>(<span class="number">3000</span>)</span><br><span class="line">app.<span class="title function_">use</span>(<span class="title function_">multer</span>(&#123;<span class="attr">dest</span>:<span class="string">&#x27;./images&#x27;</span>&#125;).<span class="title function_">any</span>())</span><br><span class="line">app.<span class="title function_">use</span>(<span class="string">&#x27;/files&#x27;</span>,<span class="function">(<span class="params">req,res</span>)=&gt;</span>&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(req.<span class="property">files</span>)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>打印的信息：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">[ </span><br><span class="line">    &#123; <span class="attr">fieldname</span>: <span class="string">&#x27;f1&#x27;</span>,</span><br><span class="line">    <span class="attr">originalname</span>: <span class="string">&#x27;web.txt&#x27;</span>,</span><br><span class="line">    <span class="attr">encoding</span>: <span class="string">&#x27;7bit&#x27;</span>,</span><br><span class="line">    <span class="attr">mimetype</span>: <span class="string">&#x27;text/plain&#x27;</span>,</span><br><span class="line">    <span class="attr">destination</span>: <span class="string">&#x27;./images&#x27;</span>,</span><br><span class="line">    <span class="attr">filename</span>:<span class="string">&#x27;3e49baaa770dfd21acdfe64d6312b7dd&#x27;</span>, <span class="comment">//转化成hash值</span></span><br><span class="line">    <span class="attr">path</span>: <span class="string">&#x27;images\\33ac0bc106b02c443e6096f45de68c14&#x27;</span>,</span><br><span class="line">    <span class="attr">size</span>: <span class="number">121</span> &#125; </span><br><span class="line">]</span><br></pre></td></tr></table></figure>
<p>效果图：<br>![1.png](&#x2F;Express实现文件上传原理 form enctype属性  path模块  multer模块&#x2F;1.png)</p>
<h1 id="四、path模块"><a href="#四、path模块" class="headerlink" title="四、path模块"></a>四、path模块</h1><p>先安装 <code>cnpm i path --save</code><br>path.parse(string)用来解析文件路径</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>);</span><br><span class="line"><span class="keyword">let</span> str = path.<span class="title function_">parse</span>(<span class="string">&#x27;C:\Users\m1883\Pictures\Icons\Adobe CC.ico&#x27;</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(str);</span><br></pre></td></tr></table></figure>
<p>运行结果</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&#123; <span class="attr">root</span>: <span class="string">&#x27;C:&#x27;</span>,</span><br><span class="line">  <span class="attr">dir</span>: <span class="string">&#x27;C:&#x27;</span>,</span><br><span class="line">  <span class="attr">base</span>: <span class="string">&#x27;Usersm1883PicturesIconsAdobe CC.ico&#x27;</span>,</span><br><span class="line">  <span class="attr">ext</span>: <span class="string">&#x27;.ico&#x27;</span>,</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&#x27;Usersm1883PicturesIconsAdobe CC&#x27;</span> </span><br><span class="line">  &#125;   </span><br></pre></td></tr></table></figure>
<p>各个属性的描述</p>
<ul>
<li><code>root</code>  在什么根目录</li>
<li><code>dir</code> 绝对地址</li>
<li><code>base</code> 文件名+后缀</li>
<li><code>ext</code> 后缀</li>
<li><code>name</code> 文件名</li>
</ul>
<h1 id="五、最终代码"><a href="#五、最终代码" class="headerlink" title="五、最终代码"></a>五、最终代码</h1><p>前端</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">form</span> <span class="attr">action</span>=<span class="string">&quot;http://localhost:3000&quot;</span> <span class="attr">method</span>=<span class="string">&quot;post&quot;</span> <span class="attr">enctype</span>=<span class="string">&quot;multipart/form-data&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;file&quot;</span> <span class="attr">name</span>=<span class="string">&quot;file&quot;</span> <span class="attr">id</span>=<span class="string">&quot;file&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;submit&quot;</span> <span class="attr">value</span>=<span class="string">&quot;提交&quot;</span> <span class="attr">class</span>=<span class="string">&quot;btn btn-primary&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>后端</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> express = <span class="built_in">require</span>(<span class="string">&#x27;express&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> fs = <span class="built_in">require</span>(<span class="string">&#x27;fs&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> multer = <span class="built_in">require</span>(<span class="string">&#x27;multer&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> server = <span class="title function_">express</span>();</span><br><span class="line">server.<span class="title function_">listen</span>(<span class="number">3000</span>);</span><br><span class="line">server.<span class="title function_">use</span>(<span class="title function_">multer</span>(&#123; <span class="attr">dest</span>: <span class="string">&#x27;./save/&#x27;</span> &#125;).<span class="title function_">any</span>());</span><br><span class="line">server.<span class="title function_">use</span>(<span class="function">(<span class="params">req, res</span>) =&gt;</span> &#123;</span><br><span class="line">    fs.<span class="title function_">rename</span>(req.<span class="property">files</span>[<span class="number">0</span>].<span class="property">path</span>, req.<span class="property">files</span>[<span class="number">0</span>].<span class="property">path</span> + path.<span class="title function_">parse</span>(req.<span class="property">files</span>[<span class="number">0</span>].<span class="property">originalname</span>).<span class="property">ext</span>, <span class="function">(<span class="params">err</span>) =&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">if</span> (err) &#123;</span><br><span class="line">            <span class="variable language_">console</span>.<span class="title function_">log</span>(err)</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">            res.<span class="title function_">send</span>(<span class="string">&#x27;ok&#x27;</span>)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>运行结果<br>![2.png](&#x2F;Express实现文件上传原理 form enctype属性  path模块  multer模块&#x2F;2.png)<br>![3.png](&#x2F;Express实现文件上传原理 form enctype属性  path模块  multer模块&#x2F;3.png)</p>
<p>若想要往数据库里传真正的文件名字需要，否则含有路径</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">path.<span class="title function_">parse</span>(src).<span class="property">name</span>+path.<span class="title function_">parse</span>(req.<span class="property">files</span>[<span class="number">0</span>].<span class="property">originalname</span>).<span class="property">ext</span>;</span><br></pre></td></tr></table></figure>
<h2 id="第二种：直接在请求中完成"><a href="#第二种：直接在请求中完成" class="headerlink" title="第二种：直接在请求中完成"></a>第二种：直接在请求中完成</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 前端编辑页面上传的商品图片</span></span><br><span class="line"><span class="keyword">const</span> multer = <span class="built_in">require</span>(<span class="string">&#x27;multer&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&quot;path&quot;</span>);</span><br><span class="line"><span class="comment">//解析图片文件,并保存位置</span></span><br><span class="line"><span class="keyword">const</span> upload = (<span class="title function_">multer</span>(&#123; <span class="attr">dest</span>: path.<span class="title function_">resolve</span>(__dirname, <span class="string">&quot;../../static/product&quot;</span>) &#125;).<span class="title function_">any</span>());</span><br><span class="line">useRouter.<span class="title function_">post</span>(<span class="string">&quot;/productIamge_upload&quot;</span>, upload, <span class="function">(<span class="params">req, res</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(req.<span class="property">files</span>)</span><br><span class="line">    res.<span class="title function_">json</span>(&#123;</span><br><span class="line">        <span class="attr">status</span>: <span class="number">0</span></span><br><span class="line">    &#125;)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
      
    </div>

    
    
    
      


    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="https://blogwxb.cn/vue%E4%B8%8Atypescript%E7%9A%84%E7%94%A8%E6%B3%95/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.jpg">
      <meta itemprop="name" content="wxb">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="会飞的猪9527">
      <meta itemprop="description" content="主要是分享自己在Web前端的一些入的坑，脱的坑的经历，也会是分享一些Node后端的知识。">
    </span>

    <span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
      <meta itemprop="name" content="undefined | 会飞的猪9527">
      <meta itemprop="description" content="">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/vue%E4%B8%8Atypescript%E7%9A%84%E7%94%A8%E6%B3%95/" class="post-title-link" itemprop="url">vue上typescript的用法</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2020-08-11 18:19:41" itemprop="dateCreated datePublished" datetime="2020-08-11T18:19:41+08:00">2020-08-11</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar-check"></i>
      </span>
      <span class="post-meta-item-text">更新于</span>
      <time title="修改时间：2022-10-07 23:14:03" itemprop="dateModified" datetime="2022-10-07T23:14:03+08:00">2022-10-07</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/%E5%89%8D%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">前端</span></a>
        </span>
    </span>

  
</div>


        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h1 id="Vue-extend-和-vue-class-component"><a href="#Vue-extend-和-vue-class-component" class="headerlink" title="Vue.extend 和 vue-class-component"></a>Vue.extend 和 vue-class-component</h1><p>使用 TypeScript 写 Vue 组件时，有两种推荐形式：</p>
<ul>
<li><code>Vue.extend()</code>：使用基础 Vue 构造器，创建一个“子类”。此种写法与 Vue 单文件组件标准形式最为接近，唯一不同仅是组件选项需要被包裹在 Vue.extend() 中。</li>
<li><code>vue-class-component</code>：通常与 <code>vue-property-decorator</code> 一起使用，提供一系列装饰器，能让我们书写类风格的 Vue 组件，和react写法很像，推荐这种写法，如果你会vue和react的话，用这种写法不容易对react的项目手生，不会react的话，用这种写法，会对后来对react的学习有很大的帮助。<h1 id="vue项目中安装"><a href="#vue项目中安装" class="headerlink" title="vue项目中安装"></a>vue项目中安装</h1></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm i -S vue-class-component </span><br><span class="line">npm i -S vue-property-decorator</span><br></pre></td></tr></table></figure>
          <!--noindex-->
            <div class="post-button">
              <a class="btn" href="/vue%E4%B8%8Atypescript%E7%9A%84%E7%94%A8%E6%B3%95/#more" rel="contents">
                阅读全文 &raquo;
              </a>
            </div>
          <!--/noindex-->
        
      
    </div>

    
    
    
      


    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




  <nav class="pagination">
    <a class="extend prev" rel="prev" href="/page/5/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/5/">5</a><span class="page-number current">6</span><a class="page-number" href="/page/7/">7</a><span class="space">&hellip;</span><a class="page-number" href="/page/10/">10</a><a class="extend next" rel="next" href="/page/7/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
  </nav>

</div>
  </main>

  <footer class="footer">
    <div class="footer-inner">


<div class="copyright">
  &copy; 
  <span itemprop="copyrightYear">2023</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">wxb</span>
</div>
<div class="busuanzi-count">
    <span class="post-meta-item" id="busuanzi_container_site_uv">
      <span class="post-meta-item-icon">
        <i class="fa fa-user"></i>
      </span>
      <span class="site-uv" title="总访客量">
        <!-- <span id="busuanzi_value_site_uv"></span> -->
        <span id="uv-views"></span>
      </span>
    </span>
    <span class="post-meta-item" id="busuanzi_container_site_pv">
      <span class="post-meta-item-icon">
        <i class="fa fa-eye"></i>
      </span>
      <span class="site-pv" title="总访问量">
        <!-- <span id="busuanzi_value_site_pv"></span> -->
        <span id="pv-views"></span>
      </span>
    </span>
</div><script src="/js/diy_footer.js"></script>
  <div class="powered-by">
    <div style="display: inline-flex;align-items: center;">
      <img src="/images/copyrihgt.png" alt="wxb 微信" with='20' height='20' style="margin-right: 4px;">
      <a href="https://beian.miit.gov.cn/" target="_blank">浙ICP备2022027687号</a>
    </div>
  </div>

    </div>
  </footer>

  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha256-XL2inqUJaslATFnHdJOi9GfQ60on8Wx1C2H8DYiN1xY=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/next-theme-pjax/0.5.0/pjax.min.js" integrity="sha256-3NkoLDrmHLTYj7csHIZSr0MHAFTXth7Ua/DDt4MRUAg=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/medium-zoom/1.0.6/medium-zoom.min.js" integrity="sha256-EdPgYcPk/IIrw7FYeuJQexva49pVRZNmt3LculEr7zM=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lozad.js/1.16.0/lozad.min.js" integrity="sha256-mOFREFhqmHeQbXpK2lp4nA3qooVgACfh88fpJftLBbc=" crossorigin="anonymous"></script>
<script src="/js/comments.js"></script><script src="/js/utils.js"></script><script src="/js/next-boot.js"></script><script src="/js/pjax.js"></script>

  
<script src="https://cdnjs.cloudflare.com/ajax/libs/hexo-generator-searchdb/1.4.0/search.js" integrity="sha256-vXZMYLEqsROAXkEw93GGIvaB2ab+QW6w3+1ahD9nXXA=" crossorigin="anonymous"></script>
<script src="/js/third-party/search/local-search.js"></script>





  
  <script data-pjax async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>




<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gitalk/1.7.2/gitalk.css" integrity="sha256-AJnUHL7dBv6PGaeyPQJcgQPDjt/Hn/PvYZde1iqfp8U=" crossorigin="anonymous">

<script class="next-config" data-name="gitalk" type="application/json">{"enable":true,"github_id":"dearDreamWeb","repo":"blogwxb.github.io","client_id":"86685a6104f8e6ba5827","client_secret":"7cf015e84bbe755bde20c8aca767977e316304ad","admin_user":"dearDreamWeb","distraction_free_mode":true,"proxy":"https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token","language":"zh-CN","js":{"url":"https://cdnjs.cloudflare.com/ajax/libs/gitalk/1.7.2/gitalk.min.js","integrity":"sha256-Pmj85ojLaPOWwRtlMJwmezB/Qg8BzvJp5eTzvXaYAfA="},"path_md5":"93ccefe6fa5dc946637b27eeb51ad55c"}</script>
<script src="/js/third-party/comments/gitalk.js"></script>

</body>
</html>
